<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-29 19:04:54
-->
<template>
  <div>
    <ItemCard title="今日用户数" :number="orderUser">
      <template #center>
        <v-chart :option="getOptions()" autoresize></v-chart>
      </template>
      <template #bottom>
        <div style="font-size: 12px; margin: 5px 0">
          退货率
          <span style="margin-left: 3px">{{ returnRate }}%</span>
        </div>
      </template>
    </ItemCard>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useEchartsStore } from '@/stores/echarts'

const echartsStore = useEchartsStore()

const orderUser = computed(() => {
  return echartsStore.echartsData.orderUser
})
const returnRate = computed(() => {
  return echartsStore.echartsData.returnRate
})
const orderUserTrend = computed(() => {
  return echartsStore.echartsData.orderUserTrend
})
const orderUserTrendAxis = computed(() => {
  return echartsStore.echartsData.orderUserTrendAxis
})

const getOptions = () => {
  return {
    xAxis: {
      data: orderUserTrendAxis.value || [],
      show: false,
    },

    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    },
    yAxis: {
      show: false,
    },
    series: {
      name: '今日用户数',
      type: 'bar',
      data: orderUserTrend.value || [],
      color: 'skyblue',
    },
  }
}
</script>

<script lang="ts">
export default {
  name: 'TodayUser',
}
</script>

<style lang="scss" scoped></style>
